<template>
  <el-table :data="list" v-loading="loading"  element-loading-text="请给我点时间！" border fit highlight-current-row style="width: 100%">
    <el-table-column
      align="center"
      label="ID"
      width="65"
    >
      <template slot-scope="scope">
        <span>{{ scope.row.api_id }}</span>
      </template>
    </el-table-column>

    <el-table-column min-width="200px" align="center" label="api标识">
      <template slot-scope="scope">
        <span>{{ scope.row.api_key }}</span>
      </template>
    </el-table-column>

    <el-table-column min-width="200px" label="api描述">
      <template slot-scope="scope">
        <span>{{ scope.row.api_name }}</span>
      </template>
    </el-table-column>

    <el-table-column width="100px" label="请求方式">
      <template slot-scope="scope">
        <span>{{ scope.row.method }}</span>
      </template>
    </el-table-column>

    <el-table-column width="180px" align="center" label="创建日期">
      <template slot-scope="scope">
        <span>{{ scope.row.create_time | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { fetchList } from '@/api/api'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  props: {
    type: {
      type: String,
      default: 'AUTH'
    },
    changed: Array
  },
  data() {
    return {
      list: null,
      listQuery: {
        type: this.type
      },
      loading: false,
      options: [
        {
          value: 'OPEN',
          label: '白名单'
        },
        {
          value: 'TOKEN',
          label: 'token授权'
        },
        {
          value: 'AUTH',
          label: 'auth授权'
        }
      ],
      value: []
    }
  },
  created() {
    this.options.splice(this.type, 1)
    this.getList()
  },
  activated() {
    if (this.changed[this.type]) {
      this.getList()
    }
  },
  methods: {
    async getList() {
      this.loading = true
      this.$emit('create') // for test
      const { err, res } = await fetchList(this.listQuery)
      if (err === null) {
        this.list = res
        this.$emit('changeApiType', this.type, false)
      }
      this.loading = false
    }
  }
}
</script>
